<template>
    <div>
        <div id="components-badge-demo-title">
            <a-badge :count="count" @click="showModal" title="Custom hover text">
                <a href="#" class="head-example" />
            </a-badge>
        </div>
        <div>
            <a-modal title="正在上传" v-for="item in fileList" v-model="visible" @ok="handleOk">
                <p>{{item.name}}</p>
                <a-progress :percent='item.complete' size="small" />
            </a-modal>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Task",
        data(){
            return {
                visible: false,
                placement: 'bottom'
            }
        },
        computed: {
            count(){
                return this.$store.getters.getCount
            },
            // eslint-disable-next-line vue/return-in-computed-property
            fileList(){
                return this.$store.getters.getFileList
            }
        },
        methods: {
            showModal() {
                this.visible = true
            },
            handleOk() {
                this.visible = false
            }
        }
    }

</script>

<style scoped>
    #components-badge-demo-title .ant-badge:not(.ant-badge-status) {
        margin-right: 20px;
    }
    .head-example {
        width: 42px;
        height: 42px;
        border-radius: 4px;
        background: #eee;
        display: inline-block;
    }
</style>